<template>
  <div>
      <div style="font-size:26px;">数据统计分析看板</div>
      <div id="data-pie" style="width: 500px;height:400px;"></div>
      <div id="data-bar" style="width: 500px;height:400px;"></div>
      <div id="data-line" style="width: 500px;height:400px;"></div>
  </div>
</template>

<script>
/*
数据统计看板
*/
import echarts from 'echarts'

export default {
    components: {},
    data() {
       return {
           
       };
    },
    methods: {
        // 画饼装图
        drawPie(id){
            let amycharts = echarts.init(document.getElementById(id))
            amycharts.setOption({
                title: {
                    text: 'ECharts 饼图 入门示例'
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        data:[
                            {value:235, name:'视频广告'},
                            {value:274, name:'联盟广告'},
                            {value:310, name:'邮件营销'},
                            {value:335, name:'直接访问'},
                            {value:400, name:'搜索引擎'}
                        ]
                    }
                ]
            });
        },
        // 画柱状图
        drawHistogram(id){
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById(id));
            // 绘制图表
            myChart.setOption({
                title: { // 标题
                    text: 'ECharts 柱状图 入门示例'
                },
                tooltip: {},
                xAxis: { // x轴数据
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        },
        // 画折线图
        drawLine(id){
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById(id));
            // 绘制图表
            myChart.setOption({
                title: { // 标题
                    text: 'ECharts折线图入门示例'
                },
                tooltip: {}, // 提示框的位置，默认随鼠标动
                xAxis: { // 横坐标数据
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {}, 
                series: [{ // 图表实例
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
    },
    created() {
        this.$nextTick(function() {
                this.drawPie('data-pie');
                this.drawHistogram('data-bar');
                this.drawLine('data-line');
        })
    }
};
</script>

<style scoped>

</style>